
<script>
import genFormItem from './gen.js';
export default {
    props: {
        formOption: {
            type: Object | Boolean,
            default(){
                return {
                        name: 'channel-form',
                        data: {},
                        
                        rules: {
                            name: [{ required: true, message: '请输入产品名称', trigger: 'blur' }]
                        },
                        btnList: [{
                            text: '保存',
                            type: 'primary',
                            onClick: this.commitForm
                        }]
                    }
            }
        },
        itemOptions:{
            type: Array,
            default(){
                return [
                            {
                                label: '类型',
                                name: 'biz_type',
                                type: 'select',
                                value:[
                                    {
                                        key: 1,
                                        text: '业务部'
                                    }
                                ]
                            }
                        ]
            }
        },
        formMap: {
            type: Object,
            // default是写法显示案例 指导使用此组件，无任何意义
            default: ()=>{
                return {
                nickname: {
                            type: 'input',
                            placeholder:'2~8个字',
                            label: '昵称'
                        },
                gender: {
                                    type: 'select',
                                    value: {},
                                    placeholder:'全部',
                                    label: '性别'
                                },
                avatar: {
                     type: 'selfController'
                },
                time: {
                    type: 'datePicker',
                    label: '出生年份',
                    secType: 'date'
                },
                bio: {
                    type: 'textarea',
                    label: '个性签名',
                    maxlength: 120
                },
                remark: {
                    type: 'textarea',
                    label: '备注'
                }

            }
            }
        }, // 组成元素配置对象
        formModel: Object, // 数据对象
        inline: Boolean,
    },
    data(){
        return {
            myFormModel: {},
            defaultStyle: {},
        }
    },
    render(h){
        const {formMap,inline,formOption,itemOptions} = this;
        let target; // 最后结果
        if(formOption){
            target = genFormItem('form',h)({...formOption,children:itemOptions},this.myFormModel);
        }else {
            target =  generateFormItems.call(this,itemOptions);
        }
        console.log('target=====',target);
        function generateFormItems(FormItems){
            // console.log(FormItems);
            return FormItems.map(opt => {
                return genFormItem(opt.type,h)(opt,this.myFormModel);
            })
        }
        return (
            // <div>111</div>   
           <div> {target}</div>
        )
    },
    watch: {
        // 根据配置项初始化对应的数据对象 以免vue无法监听；注意，这里更改了myFormModel之后同样会触发myFormModel的watch 从而同步了父组件的formModel
        itemOptions: {
            deep:true,
            immediate:true,
            handler(itemOptions){
                this._initformModel(itemOptions);
            }
        },
        //  每次数据的改变都进行一次对父组件的数据源对象的同步
        myFormModel: {
            deep:true,
            // immediate:true, // 不加就不会生效 不知道为什么
            handler(formModel){
                console.log('formModel===watch',formModel);
                this.$emit('update:formModel',JSON.parse(JSON.stringify(formModel)))
              
            }
        } 
    },
    computed: {
        
    },

    methods: {
        /**
         * value  默认返回值
         * key    属性
         * datePickerType  具体时间选择器类型
         */
        _changeDaterange(value,key,datePickerType="datetimerange"){
            //  console.log('outer',value,this,key,datePickerType);
              switch(datePickerType){
                    case 'date':
                         this.formModel[key] = value;
                    break;
                    case 'datetimerange':
                        this.formModel.start_time = value[0];
                        this.formModel.end_time = value[1];
                    break;
                    default:
                        this.formModel.start_time = value[0];
                        this.formModel.end_time = value[1];

                }
        },
        // 根据组成元素配置对象映射出对应的数据对象
        _initformModel(itemOptions){
            itemOptions.forEach(item=>{
                        let { key, defaultVal } = item;
                        let val = '';
                        // 判断是否有默认值，有则赋值
                        if(defaultVal){
                            val =  defaultVal;
                        }
                        // 如果数据对象存在值 也应该保持 不然每次挂载时都会重置了
                        if(this.formModel[key]){
                            val =  this.formModel[key];
                        }
                        this.$set(this.myFormModel,key , val)
                    });
                    console.log('formModel=====',this.myFormModel);
            // this.myFormModel = formModel;
        },
        
        
    }

}
</script>

<style>

</style>